/// <reference path="../bs4/scss/bootstrap.scss" />


/* File Upload
------------------------------------*/

/*
 * User Interface Plugin (for single file uploads)
 *
 * Based on:
 * jQuery File Upload UI Plugin CSS 6.3
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

 .fileupload-container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    border: $input-border-width solid $input-border-color;
    background-color: $input-bg;
    border-radius: $input-border-radius;
    overflow: hidden;

    .fileupload-thumb-stage {
        position: relative;
        width: 64px;
        max-width: 64px;
        border-right: 1px solid rgba(#000, 0.2);
        background: url('') repeat;
    }

    .fileupload-thumb {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .fileupload-controls {
        flex-grow: 1;
        padding: 0.5rem 0.5rem;
    }
 }

.fileupload {
	.btn.cancel {
		display: none;
	}

    .fileupload-buttons {
        position: relative;
    }

	.fileinput-button {
		position: relative;
		overflow: hidden;
	}

	.fileinput-button input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		direction: ltr;
		cursor: pointer;
	}

    > .fileupload-progress {
        position: absolute;
        left: 0;
        bottom: -1px;
        right: 0;  
        
	    .progress {
            height: 0.25rem;
		    background: transparent;
            margin: 0;
            border-radius: 0;
            border-bottom-left-radius: $input-border-radius;
            border-bottom-right-radius: $input-border-radius;
            box-shadow: none;

            .progress-bar {
                background-color: $primary;
                transition: width 0.25s ease, background-color 0.25s ease;
            }
	    }

        &.success {
            transition-delay: 0.4s;
        }

        &.success .progress-bar {
            background-color: $success !important;
        }
    }
}


// Multi file uploader
// =======================================

/*.fileupload-multi {
	.fileinput-button {
		position: relative;
		overflow: hidden;
		float: left;
		margin-right: 4px;
	}

	.fileinput-button input {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		border: solid transparent;
		border-width: 0 0 100px 200px;
		opacity: 0;
		-moz-transform: translate(-300px, 0) scale(4);
		direction: ltr;
		cursor: pointer;
	}

	.fileupload-buttonbar .btn,
	.fileupload-buttonbar .toggle {
		margin-bottom: 5px;
	}

	.files .progress {
		width: 200px;
	}

	.progress-animated .bar {
		background: url(images/progressbar.gif) !important;
		filter: none;
	}

	.fileupload-loading {
		position: absolute;
		left: 50%;
		width: 128px;
		height: 128px;
		background: url(images/loading.gif) center no-repeat;
		display: none;
	}

	.fileupload-processing .fileupload-loading {
		display: block;
	}

	@media (max-width: 480px) {
		.files .btn span {
			display: none;
		}

		.files .preview * {
			width: 40px;
		}

		.files .name * {
			width: 80px;
			display: inline-block;
			word-wrap: break-word;
		}

		.files .progress {
			width: 20px;
		}

		.files .delete {
			width: 60px;
		}
	}
}*/